<template>
	<a-layout class="order-detail">
		<a-layout-content>
			<a-page-header style="background: #fff">
				<template v-slot:title>
					<span @click="back" class="iconfont icon-fanhui3"></span>
					<span class="title"> 订单详情</span></template
				>
			</a-page-header>
			<div class="detail-wrapper">
				<div class="detail-left">
					<div class="top">
						<p><span>货物名称</span><span>实取件数</span><span>件数</span></p>
						<p>
							<span>{{ form.goods_name }}</span
							><span>{{ form.actual_qty }}</span
							><span>{{ form.qty }}</span>
						</p>
					</div>

					<div class="bottom">
						<div class="bottom-left">
							<div class="merchant-info">
								<p>
									<span>商户名称：</span><span>{{ form.merchant_name }}</span>
								</p>
								<p>
									<span>订单编号：</span><span>{{ form.order_no }}</span>
								</p>
								<p>
									<span>下单时间：</span><span>{{ form.created_at_show }}</span>
								</p>
								<p>
									<span>订单类型：</span
									><span>{{ orderTypeMap[form.ptype + ""] }}</span>
								</p>
								<p>
									<span>支付方式：</span
									><span>{{ payMethodMap[form.settlement_type + ""] }}</span>
								</p>

								<p>
									<span>支付状态：</span
									><span>{{ payStatusMap[form.pay_status + ""] }}</span>
								</p>
								<p>
									<span>是否上门取货：</span
									><span>{{ pcikUpMap[form.is_pickup + ""] }}</span>
								</p>
								<p>
									<span>场内CP：</span><span>{{ form.in_cpname }}</span>
								</p>
							</div>
							<div class="pay-info">
								<p>
									<span>付款方式：</span
									><span>{{ payerMap[form.payer + ""] }}</span>
								</p>
								<p>
									<span>订单金额：</span
									><span>¥ {{ form.order_amount / 100 }}</span>
								</p>
								<!-- <p>
									<span>运费：</span><span>¥ {{ form.freight / 100 }}</span>
								</p> -->
								<p>
									<span
										style="
											color: rgba(153, 153, 153, 1);
											font-size: 16px;
											font-weight: bold;
										"
										>实付金额：</span
									><span style="color: rgba(231, 146, 58, 1)">
										<!-- ¥ {{ form.pay_amount / 100 }} -->
										¥ {{ form.order_amount / 100 }}
									</span>
								</p>
							</div>
						</div>
						<div class="bottom-right">
							<div class="sender-info">
								<p>发单人信息</p>
								<p>
									<span>发单人：</span><span>{{ form.billed_merchant }}</span>
								</p>
								<p>
									<span>发单地址：</span><span>{{ form.billed_address }}</span>
								</p>
								<p>
									<span>发单人手机号：</span
									><span>{{ form.billed_phone }}</span>
								</p>
							</div>
							<div class="pickup-info">
								<p>取货信息</p>
								<p>
									<span>联系人：</span><span>{{ form.pick_contact }}</span>
								</p>
								<p>
									<span>取货地址：</span><span>{{ form.pick_address }}</span>
								</p>
								<p>
									<span>取货方电话：</span><span>{{ form.pick_phone }}</span>
								</p>
							</div>
							<div class="receiving-info">
								<p>收货信息</p>
								<p>
									<span>收货人：</span><span>{{ form.delivery_user }}</span>
								</p>
								<p>
									<span>收货地址：</span
									><span>{{ form.delivery_address }}</span>
								</p>
								<p>
									<span>收货人电话：</span><span>{{ form.delivery_tel }}</span>
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="detail-right">
					<p><span>货运轨迹</span></p>
					<!-- 物流轨迹 -->
					<div class="trajectory">
						<!-- 图片放大 -->
						<div class="mark" ref="mark" @click="closeMark">
							<img class="mark-img" :src="markImg" alt="" />
							<span class="iconfont icon-guanbi"> </span>
						</div>
						<div
							data-mohe-type="kuaidi_new"
							class="g-mohe"
							id="mohe-kuaidi_new"
						>
							<div id="mohe-kuaidi_new_nucom">
								<div class="mohe-wrap mh-wrap">
									<div class="mh-cont mh-list-wrap mh-unfold">
										<div class="mh-list">
											<ul>
												<li
													:class="{ first: index === 0 }"
													v-for="(item, index) in form.logs"
													:key="index"
												>
													<p>{{ formatDate(item.updated_at) }}</p>
													<p>{{ item.content }}</p>
													<span class="before"></span
													><span class="after"></span>
													<div
														v-if="
															[4, 5].includes(item.status) &&
															item.images &&
															item.images.length > 0
														"
														class="trajectory-img"
													>
														<img
															@click="enlarge($event)"
															v-for="(item, index) in item.images"
															:key="index"
															style=""
															:src="item"
															alt=""
														/>
													</div>
												</li>
												<!-- <li>
													<p>2015-04-28 07:38:44</p>
													<p>
														深圳市南油速递营销部安排投递（投递员姓名：蔡远发<a
															href="tel:18718860573"
															>18718860573</a
														>;联系电话：）
													</p>
													<span class="before"></span
													><span class="after"></span>
												</li> -->
												<!-- <li>
													<p>2015-04-28 05:08:00</p>
													<p>
														到达广东省邮政速递物流有限公司深圳航空邮件处理中心处理中心（经转）
													</p>
													<span class="before"></span
													><span class="after"></span>
												</li> -->
												<!-- <li>
													<p>2015-04-28 00:00:00</p>
													<p>离开中山市 发往深圳市（经转）</p>
													<span class="before"></span
													><span class="after"></span>
												</li> -->
												<!-- <li>
													<p>2015-04-27 15:00:00</p>
													<p>
														到达广东省邮政速递物流有限公司中山三角邮件处理中心处理中心（经转）
													</p>
													<span class="before"></span
													><span class="after"></span>
												</li> -->
												<!-- <li>
													<p>2015-04-27 08:46:00</p>
													<p>离开泉州市 发往中山市</p>
													<span class="before"></span
													><span class="after"></span>
												</li> -->
												<!-- <li>
													<p>2015-04-26 17:12:00</p>
													<p>
														泉州市速递物流分公司南区电子商务业务部已收件，（揽投员姓名：王晨光;联系电话：<a
															href="tel:13774826403"
															>13774826403</a
														>）
													</p>
													<span class="before"></span
													><span class="after"></span>
												</li> -->
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- 物流轨迹 -->
					</div>
				</div>
			</div>
		</a-layout-content>
	</a-layout>
</template>


<script>
	import orderHttp from "@/api/order"
	export default {
		name: "order-detail",
		props: {
			// record: {
			// 	type: [Object],
			// 	default() {
			// 		return {}
			// 	},
			// },
		},
		data() {
			return {
				markImgs: [
					// "https://img13.360buyimg.com/n2/jfs/t1/216803/18/4766/128412/6194bf2bE56b07df3/d831d8b9818c96b1.jpg",
					// "https://img11.360buyimg.com/n2/jfs/t1/207434/17/2834/157261/6154066eEcb324d89/36a4349f2134156e.jpg",
					// "https://img11.360buyimg.com/n7/jfs/t1/141583/34/21748/151167/61a05767Ed0e65541/2baf62c68e0081d0.jpg",
				],
				markImg: "",
				form: {},
				payMethodMap: {
					0: "余额支付",
					1: "微信支付",
				},
				payStatusMap: {
					"-1": "支付失败",
					0: "未支付",
					1: "支付成功",
					2: "支付中",
					3: "上海订单(挂起的订单)",
				},
				orderTypeMap: {
					1: "场内订单",
					2: "场外订单",
					3: "tms订单",
				},
				pcikUpMap: {
					0: "否",
					1: "是",
				},
				payerMap: {
					1: "寄付",
					2: "到付",
				},
			}
		},
		created() {
			this.getOrderDetail(this.$route.params.id)
		},
		methods: {
			formatDate(timeStr) {
				return this.$formatDate("Y-M-D h:m:s", +new Date(timeStr))
			},
			closeMark({ target }) {
				console.log(target)
				if (target.nodeName === "DIV" || target.nodeName === "SPAN") {
					this.$refs["mark"].style.display = "none"
				}
			},
			enlarge({ target }) {
				this.$refs["mark"].style.display = "block"
				this.markImg = target.src
				console.log(target)
			},
			back() {
				// this.$emit("handleTable")
				this.$router.back()
			},
			getOrderDetail(id) {
				orderHttp
					.select(id)
					.then((res) => {
						console.log("订单详情", res)

						if (res.code !== 1) {
							return this.$message.warning(res.message)
						}

						let requiredFields = {
							goods_name: "",
							actual_qty: "",
							qty: "",
							// ==============商户信息================
							merchant_name: "",
							order_no: "",
							created_at_show: "",
							ptype: "",
							settlement_type: "",
							pay_status: "",
							is_pickup: "",
							in_cpname: "",
							// ====================================
							payer: "",
							order_amount: "",
							freight: "",
							pay_amount: "",
							// ================发单人信息====================
							billed_merchant: "",
							billed_address: "",
							billed_phone: "",
							// ================取货信息====================
							pick_contact: "",
							pick_address: "",
							pick_phone: "",
							// ================收货人====================
							delivery_user: "",
							delivery_address: "",
							delivery_tel: "",
							//  ================物流轨迹====================
							logs: [],
						}
						this.form = this.$chooseFields(
							res.data,
							Object.keys(requiredFields),
							{},
							requiredFields
						)
					})
					.catch((e) => {})
			},
		},
		watch: {
			// record: {
			// 	immediate: true,
			// 	deep: true,
			// 	handler(a, b) {
			// 		console.log(a, b)
			// 		if (!a) {
			// 			return
			// 		}
			// 		// 获取订单详情
			// 		this.getOrderDetail(a.id)
			// 	},
			// },
		},
	}
</script>

<style lang="less" >
	.order-detail {
		// background: #eee;
		padding: 15px;
		.icon-fanhui3 {
			font-size: 18px;
			vertical-align: middle;
			cursor: pointer;
		}
		.title {
			vertical-align: middle;
		}

		.detail-wrapper {
			margin-top: 10px;
			display: flex;
			justify-content: space-between;
			.detail-left {
				width: 70%;
				.top {
					background: #fff;
					p {
						margin: 0;
						padding: 0;
						display: grid;
						grid-auto-flow: row;
						grid-template-columns: calc(100% / 3) calc(100% / 3) calc(100% / 3);
						grid-template-rows: repeat(1, 40px);
						align-items: center;
						padding-left: 15px;
						position: relative;
						font-size: 14px;
						&:first-of-type {
							font-size: 16px;
							font-weight: bold;
							&::after {
								content: "";
								display: inline-block;
								border-bottom: 1px solid #ccc;
								width: calc(100% - 20px);
								position: absolute;
								left: 10px;
								bottom: 0;
							}
						}
						&:nth-of-type(2) {
							span {
								padding-left: 10px;
							}
						}
					}
				}
				.bottom {
					margin-top: 10px;
					background: #fff;
					display: grid;
					grid-auto-flow: column;
					grid-template-columns: 55% 45%;
					padding: 15px;
					box-sizing: border-box;
					p {
						margin: 0;
						padding: 0;
					}
					.bottom-left {
						.merchant-info,
						.pay-info {
							p {
								// height: 30px;
								// line-height: 30px;
								display: grid;
								grid-auto-flow: column;
								grid-template-columns: 100px calc(100% - 100px);

								grid-template-rows: 50px;

								// align-content: center;
								align-items: center;
								span {
									&:first-of-type {
										text-align: left;
										color: rgba(153, 153, 153, 1);
									}
									&:nth-of-type(2) {
										text-align: left;
										color: rgba(85, 85, 85, 1);
									}
								}
							}
							margin-bottom: 30px;
						}
						.pay-info {
							margin-bottom: 0px;
						}
					}

					.bottom-right {
						.sender-info,
						.pickup-info,
						.receiving-info {
							p {
								display: grid;
								grid-auto-flow: column;
								align-items: center;
								grid-template-columns: 100px calc(100% - 100px);
								grid-template-rows: 50px;
								&:first-of-type {
									color: rgba(51, 158, 86, 1);
									font-weight: bold;
									font-size: 14px;
								}
								span {
									&:first-of-type {
										text-align: left;
										color: rgba(153, 153, 153, 1);
									}
									&:nth-of-type(2) {
										text-align: left;
										color: rgba(85, 85, 85, 1);
									}
								}
							}
							margin-bottom: 30px;
						}
						.sender-info {
						}
						.pickup-info {
						}
						.receiving-info {
							margin-bottom: 0;
						}
					}
				}
			}
			.detail-right {
				width: calc(30% - 10px);
				background: #fff;
				& > p {
					margin: 0;
					padding: 0;
					display: grid;
					grid-auto-flow: row;
					// grid-template-columns: calc(100% / 3) calc(100% / 3) calc(100% / 3);
					grid-template-columns: 100%;
					grid-template-rows: repeat(1, 40px);
					align-items: center;
					padding-left: 15px;
					position: relative;
					font-size: 14px;
					&:first-of-type {
						font-size: 16px;
						font-weight: bold;
						&::after {
							content: "";
							display: inline-block;
							border-bottom: 1px solid #ccc;
							width: calc(100% - 20px);
							position: absolute;
							left: 10px;
							bottom: 0;
						}
					}
				}
				.trajectory {
					box-sizing: border-box;
					// padding: 15px;
					margin-top: 35px;
					overflow: auto;
					height: calc(100% - 100px);
					.mark {
						display: none;
						width: 100vw;
						height: 100vh;
						// background: #000;
						// opacity: 0.5;
						background-color: rgba(0, 0, 0, 0.5);
						z-index: 99;
						position: fixed;
						left: 0;
						top: 0;
						.mark-img {
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
							width: 350px;
							height: 350px;
							z-index: 99;
						}
						.icon-guanbi {
							position: absolute;
							right: 50px;
							top: 50px;
							// color: #606266;
							color: #fff;

							font-size: 36px;
							cursor: pointer;
						}
					}
					/*===================================*/
					ul,
					li {
						list-style: none;
					}
					#mohe-kuaidi_new {
						p {
							margin: 0;
							padding: 0;
						}

						.mh-list-wrap .mh-list li.first {
							color: #3eaf0e;
						}

						.mh-list-wrap .mh-list li.first .after {
							background: #3eaf0e;
						}

						.trajectory-img {
							display: flex;
							justify-content: flex-start;
							img {
								width: 60px;
								height: 60px;
								margin-right: 10px;
							}
						}

						.mh-list-wrap .mh-list li.first {
							color: #3eaf0e;
						}

						.mh-list-wrap .mh-list li {
							color: #666;
						}

						ul,
						li,
						menu {
							list-style: outside none none;
						}
						/* 轨迹标记 */

						p {
							margin: 0;
							padding: 0;
						}

						.mh-wrap {
							margin: 6px 0;
						}

						.mh-wrap a {
							text-decoration: none;
						}

						.mh-wrap a:hover {
							text-decoration: underline;
						}

						.mh-list-wrap {
							max-height: 0;
							_height: 0;
							--overflow: hidden;
						}

						.mh-list-wrap.mh-unfold {
							max-height: 281px;
							_height: 281px;
						}

						// .mh-list-wrap .mh-list {
						// 	border-top: 1px solid #eee;
						// 	margin: 0 15px;
						// 	padding: 15px 0;
						// }

						.mh-list-wrap .mh-list ul {
							max-height: 255px;
							_height: 255px;
							// padding-left: 75px;
							padding-right: 20px;
							--overflow: auto;
							height: 626px;
						}

						.mh-list-wrap .mh-list li {
							position: relative;
							border-bottom: 1px solid #f5f5f5;
							margin-bottom: 8px;
							padding-bottom: 8px;
							box-sizing: border-box;
							color: #666;
						}

						.mh-list-wrap .mh-list li p {
							line-height: 30px;
						}

						.mh-list-wrap .mh-list li .before {
							position: absolute;
							left: -13px;
							top: 2.2em;
							height: 82%;
							width: 0;
							border-left: 2px solid #ddd;
						}

						.mh-list-wrap .mh-list li .after {
							position: absolute;
							left: -18px;
							top: 8px;
							width: 12px;
							height: 12px;
							border: 1px solid #ddd;
							border-radius: 50%;
						}
						font: 12px/150% Arial, Verdana, "宋体";
					}
					/*===================================*/
				}
			}
		}
	}
</style>